<template>
  <div id="charts-a" style="height: 626px; width: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import { allList } from '../../../api/index';
export default {
  data() {
    return {
      myCharts: null,
      currentPage: 1, //当前页
      totalPage: 0,
      allLists:[]
    };
  },
  methods: {
    inChartss(a) {
      let start = (this.currentPage - 1) * 5;
      let end = start + 5;
      let currentData = a.slice(start, end);
      // 绘制图表
      this.myCharts.setOption({
        title: {
          text: "ECharts",
        },
           legend: {
          textStyle: {
            fontSize: 16, //字体大小
            color: "#9ccef1", //字体颜色
          },
        
          right: "10%",
        },
        tooltip: {},
        xAxis: {
          data: currentData.map((r) => r.name),
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: currentData.map((r) => r.pid),
            //   设置图形样式
            barCategoryGap: "55%",
            barWidth:'10%',
            itemStyle: {
              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              borderRadius: [50, 50, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#8c72fc",
                },
                {
                  offset: 1,
                  color: "purple",
                },
              ]),
            },
          },
        ],
      });
    },
  },
  mounted() {
    allList().then(({ data }) => {
    
      this.allLists = data;
    });
    this.myCharts = echarts.init(document.getElementById("charts-a"));
  },
  watch: {
    
    allLists(a, b) {
       
      this.inChartss(a);
      this.totalPage = Math.ceil(a.length / 5);
      setInterval(() => {
        if (++this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.inChartss(a);
      }, 2000);
    },
  },
};
</script>

<style scoped></style>
